<template>
    <div>
        Table 表格
        <div>
            <template>
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地址">
                </el-table-column>
                </el-table>
            </template>
        </div>

        Tag 标签
        <div>
            <el-tag>标签一</el-tag>
            <el-tag type="success">标签二</el-tag>
            <el-tag type="info">标签三</el-tag>
            <el-tag type="warning">标签四</el-tag>
            <el-tag type="danger">标签五</el-tag>
        </div>
        Progress 进度条
        <div>
            <el-progress :percentage="50"></el-progress>
            <el-progress :percentage="100" :format="format"></el-progress>
            <el-progress :percentage="100" status="success"></el-progress>
            <el-progress :percentage="100" status="warning"></el-progress>
            <el-progress :percentage="50" status="exception"></el-progress>
        </div>

        Tree 树形控件
        <div>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>

        Pagination 分页
        <div>
            <div class="block">
                <span class="demonstration">页数较少时的效果</span>
                <el-pagination
                    layout="prev, pager, next"
                    :total="50">
                </el-pagination>
                </div>
                <div class="block">
                <span class="demonstration">大于 7 页时的效果</span>
                <el-pagination
                    layout="prev, pager, next"
                    :total="1000">
                </el-pagination>
                </div>
        </div>

        Badge 标记
        <div>
            <el-badge :value="12" class="item">
            <el-button size="small">评论</el-button>
            </el-badge>
            <el-badge :value="3" class="item">
            <el-button size="small">回复</el-button>
            </el-badge>
            <el-badge :value="1" class="item" type="primary">
            <el-button size="small">评论</el-button>
            </el-badge>
            <el-badge :value="2" class="item" type="warning">
            <el-button size="small">回复</el-button>
            </el-badge>

            <el-dropdown trigger="click">
            <span class="el-dropdown-link">
                点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="clearfix">
                评论
                <el-badge class="mark" :value="12" />
                </el-dropdown-item>
                <el-dropdown-item class="clearfix">
                回复
                <el-badge class="mark" :value="3" />
                </el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
        </div>

        Avatar 头像
        <div>
            <template>
                <el-row class="demo-avatar demo-basic">
                    <el-col :span="12">
                    <div class="sub-title">circle</div>
                    <div class="demo-basic--circle">
                        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                        <div class="block" v-for="size in sizeList" :key="size">
                        <el-avatar :size="size" :src="circleUrl"></el-avatar>
                        </div>
                    </div>
                    </el-col>  
                    <el-col :span="12">
                    <div class="sub-title">square</div>
                    <div class="demo-basic--circle">
                        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
                        <div class="block" v-for="size in sizeList" :key="size">
                        <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
                        </div>
                    </div>
                    </el-col> 
                </el-row>
                </template>
        </div>

        Skeleton 骨架屏
        <div>
            <template>
            <el-skeleton />
            </template>
        </div>

        Empty 空状态
        <div>
            <el-empty description="描述文字"></el-empty>
        </div>

        Descriptions 描述列表
        <div>
            <el-descriptions title="用户信息">
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
            <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
            <el-descriptions-item label="备注">
            <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
        </el-descriptions>
        </div>

        Result 结果
        <div>
            <el-row>
                <el-col :sm="12" :lg="6">
                    <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
                    <template slot="extra">
                        <el-button type="primary" size="medium">返回</el-button>
                    </template>
                    </el-result>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
                    <template slot="extra">
                        <el-button type="primary" size="medium">返回</el-button>
                    </template>
                    </el-result>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
                    <template slot="extra">
                        <el-button type="primary" size="medium">返回</el-button>
                    </template>
                    </el-result>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
                    <template slot="extra">
                        <el-button type="primary" size="medium">返回</el-button>
                    </template>
                    </el-result>
                </el-col>
                </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name:'elementUIdate',
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
           data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        sizeList: ["large", "medium", "small"],

        }
      },
      methods: {
      format(percentage) {
        return percentage === 100 ? '满' : `${percentage}%`;
      },
      handleNodeClick(data) {
        console.log(data);
      }
    }
    }
  </script>